<template>
  <div>
    <el-dialog :title="'受试者【'+subjectNum+'】时间记录表打印'" :visible.sync="timeDialogVisible" :before-close="closeDialog"
               :close-on-click-modal="false" v-on:open="loadData">
      <el-form>
        <el-form-item>
          <span><strong>一、选择周期</strong></span><br/>
          <el-select v-model="cycle" placeholder="请选择试验周期" style="margin-left: 24px">
            <el-option
              v-for="item in options"
              :label="item.cycles"
              :value="item.cycles">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span><strong>二、打印模式</strong></span><br/>
          <el-radio v-model="selectedType" :label="1">按周期</el-radio>
          <br/>
          <el-radio v-model="selectedType" :label="2">指定日期</el-radio>
          <el-date-picker
            v-model="time"
            @change="getTime"
            placeholder="请指定打印日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" @click="toPrint"><i class="fa fa-print"></i>打印</el-button>
          <el-button @click.native="closeDialog">关闭</el-button>
        </el-form-item>
      </el-form>

      <div style="clear: both"></div>
      <div id="printTarget" v-show="false" style="width: 100%;">
        <h4 style="text-align: center">样本采集时间记录表</h4>
        <div v-if="projectInformation!=null&&projectInformation!=undefined">
          <table style="width: 100%;border-collapse: collapse;font-size: 15px">
              <thead style="display:table-header-group;">
                <tr>
                  <td style="width: 15%">项目名称：</td>
                  <td style="border-bottom: 1px solid #000;" colspan="2">{{projectInformation.projectName}}</td>
                  <td style="border-bottom: 1px solid #000;"></td>
                  <td></td>
                </tr>
                <tr style="height: 30px">
                  <td >方案编号：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{projectInformation.num}}</td>
                  <td >研究单位：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{projectInformation.siteName}}</td>
                </tr>
                <tr style="height: 30px">
                  <td>主要研究者：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000;">{{projectInformation.bidder}}</td>
                  <td>申办方/CRO：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{projectInformation.bidder}}</td>
                </tr>
                <tr style="height: 30px">
                  <td>受试者随机号：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{projectInformation.randomNum}}</td>
                  <td>受试者代码：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000;">{{subjectNum}}</td>
                </tr>
                <tr style="height: 30px">
                  <td>给药日期时间：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000">{{takingTime}}</td>
                  <td>周期：</td>
                  <td style="flex: 1;border-bottom: 1px solid #000;width: 30%">{{maxCycles}}</td>
                </tr>
                <td height="20px"></td>
                <tr style="border: 1px solid #000">
                  <th style="border-right: 1px solid #000;">样本采集环节</th>
                  <th style="border-right: 1px solid #000;">计划时间</th>
                  <th style="border-right: 1px solid #000;">理论时间</th>
                  <th style="border-right: 1px solid #000;">实际时间</th>
                  <th >操作者</th>
              </tr>
            </thead>
              <tbody>
                  <tr v-for="item in subjectInformationList" style="border: 1px solid #000">
                <td align="center" style="border-right: 1px solid #000;">{{item.name}}</td>
                
                <td align="center" style="border-right: 1px solid #000;">
                  {{item.planning == null ? '-' : item.planning}}
                </td>
                <td align="center" style="border-right: 1px solid #000;">{{item.theoryTime == null ? '-' : item.theoryTime}}</td>
                <td align="center" style="border-right: 1px solid #000;">
                  {{item.endTime == null ? '-' : item.endTime}}
                </td>
                <td align="center">{{item.oper}}</td>
              </tr>
              </tbody>
              <tfoot style="display:table-footer-group;">
              <tr>
              </tr>
                <tr>
                  <td >操作者签名：</td>
                  <td style="border-bottom: 1px solid #000"></td>
                  <td style="border-bottom: 1px solid #000"></td>
                  <td style="border-bottom: 1px solid #000"></td>
                  <td style="border-bottom: 1px solid #000"></td>
                </tr>
                <tr>
                  <td>表格打印模式：</td>
                  <td v-if="selectedType == 1" style="width: 20px">按周期:{{cycle}}</td>
                  <td v-if="selectedType == 2">按日期:{{time}}</td>
                </tr>
                <tr>
                  <td>打印日期时间：</td>
                  <td style="border-bottom: 1px solid #000">{{currentTime}}</td>
                </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import http from '../../../api/http'
  export default {
    data() {
      return {
        subjectInformationList: null,
        projectInformation: null,
        selectedType: 1,
        time: null,
        cycle: null,
        form: {},
        options: null, // 从pt_project_process表获取
        subNum: this.subjectNum,
        currentTime: null,
        maxCycles: null,
        takingTime: null
      }
    },
    props: {
      timeDialogVisible: {
        type: Boolean,
        default: false
      },
      subjectNum: {type: String},
      subjectId: {type: String},
      projectId: {type: String},
    },
    computed: {},
    methods: {
      loadData(){
        var vm = this;
        vm.subjectInformationList = null;
        vm.projectInformation = null
        http.postData(vm, '/pt/subjects/queryProSite/' + vm.subjectId, {}, function (resp) {
          var ret = resp.body;
          if (ret.code == 111) {
            vm.projectInformation = ret.value[0];
          }
        });

        http.postData(vm, '/pt/process/queryMaxCycles/' + vm.$utils.getCurrenrProject().id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code == 111) {
            vm.maxCycles = ret.value.cycles;
          }
        });

        http.postData(vm, '/pt/process/queryCycles/' + vm.$parent.projectId, {}, function (resp) {
//          console.log(resp.body);
          var ret = resp.body;
          if (ret.code == 111) {
            vm.options = ret.value;
          }
        });

        var now = new Date;
        this.currentTime = now.getFullYear() + "/" + (now.getMonth() + 1) + "/" + now.getDate() + "    " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
      },
      getTime(date){
        this.time = date;
      },
      toPrint(){
        var vm = this;
        var type = vm.selectedType;
        var cycleNum = vm.cycle;
        var cycleTime = vm.time;

        vm.subjectInformationList = null;

        http.postData(vm, '/pt/subjectsProcess/takingTime/' + vm.$utils.getCurrenrProject().id, {}, function (resp) {
          var ret = resp.body;

          if (ret.code == 111) {
            vm.takingTime = ret.value;
          }
//          console.log(resp);
        })

        // 选择周期打印时
        if (type == 1) {
          if (cycleNum == null || cycleNum == undefined) {
            vm.$message.error({title: '操作失败', message: "请选择试验周期"});
            return;
          }
          http.postData(vm, '/pt/subjects/timeDialogTable/' + type + "-" + vm.subjectId + "-" + cycleNum, {}, function (resp) {
            var ret = resp.body;
            if (ret.code == 111) {
              vm.subjectInformationList = ret.value;
              console.log(vm.subjectInformationList)
              setTimeout(function () {
                var printHtml = vm.$el.querySelector("#printTarget").innerHTML;
                var wid = window.open('blank', '_blank', 'width=200px;');
                wid.document.write(printHtml);
                setTimeout(function () {
                  wid.print();
                  wid.close();
                }, 1000);
              }, 500);
            }
          })
        }
        ;
        // 选择日期打印时
        if (type == 2) {
          if (cycleTime == null || cycleTime == undefined) {
            vm.$message.error({title: '操作失败', message: "请选择试验日期"});
            return;
          }
          http.postData(vm, '/pt/subjects/timeDialogTable/' + type + "-" + vm.subjectId + "-" + cycleTime, {}, function (resp) {
            var ret = resp.body;
            if (ret.code == 111) {
              vm.subjectInformationList = ret.value;
              setTimeout(function () {
                var printHtml = vm.$el.querySelector("#printTarget").innerHTML;
                var wid = window.open('blank', '_blank', 'width=200px');
                wid.document.write(printHtml);
                setTimeout(function () {
                  wid.print();
                  wid.close();
                }, 1000);
              }, 500);
            }
          })
        }
        ;
      },
      closeDialog(){
        this.$emit('closeTimeDialogTable');
      }
    },
    created() {
    },
  }
</script>
<style>
</style>
